import 'package:banner_carousel/banner_carousel.dart';
import 'package:flutter/material.dart';
import 'package:mirror/AppStyle.dart';
import 'package:mirror/api/NoticeApi.dart';
import 'package:mirror/bean/NoticeBean.dart';
import 'package:mirror/page/home/pages/home/ActivityList.dart';
import 'package:mirror/page/home/pages/home/BlindBoxList.dart';
import 'package:mirror/page/home/pages/home/CollectionList.dart';
import 'package:mirror/service/NetworkService.dart';
import 'package:mirror/widget/MarqueeWidget.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<String> tabs = ["藏品", "盲盒", "活动"];

  List<NoticeBean> noticeList = [];

  Future<void> getNotice() async {
    try {
      List<NoticeBean>? tmpList = await NoticeApi.getNoticeList();
      if (tmpList != null) {
        noticeList.addAll(tmpList);
        setState(() {});
      }
    } catch (e) {
      if (e is RequestError) {
        print(e);
      } else {
        print(e);
      }
    }
  }

  @override
  void initState() {
    super.initState();
    getNotice();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return [
              SliverAppBar(
                pinned: true,
                floating: true,
                snap: true,
                elevation: 10,
                flexibleSpace: AnimatedSwitcher(
                  duration: const Duration(seconds: 1),
                  child: innerBoxIsScrolled
                      ? Container()
                      : ListView(
                          children: [
                            Padding(
                              padding: const EdgeInsets.symmetric(vertical: 20),
                              child: BannerCarousel(
                                showIndicator: true,
                                banners: [
                                  BannerModel(
                                      id: "1",
                                      imagePath:
                                          'https://picjumbo.com/wp-content/uploads/the-golden-gate-bridge-sunset-1080x720.jpg'),
                                  BannerModel(
                                      id: "2",
                                      imagePath:
                                          'https://picjumbo.com/wp-content/uploads/the-golden-gate-bridge-sunset-1080x720.jpg'),
                                  BannerModel(
                                      id: "3",
                                      imagePath:
                                          'https://picjumbo.com/wp-content/uploads/the-golden-gate-bridge-sunset-1080x720.jpg'),
                                  BannerModel(
                                      id: "4",
                                      imagePath:
                                          'https://picjumbo.com/wp-content/uploads/the-golden-gate-bridge-sunset-1080x720.jpg'),
                                ],
                                customizedIndicators:
                                    const IndicatorModel.animation(
                                        width: 20,
                                        height: 5,
                                        spaceBetween: 2,
                                        widthAnimation: 50),
                                activeColor: Constant.mainColor,
                                disableColor: Colors.white,
                                animation: true,
                                borderRadius: 5,
                                width: double.infinity,
                                indicatorBottom: false,
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.symmetric(
                                  horizontal: 20, vertical: 5),
                              child: Container(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 10),
                                decoration: BoxDecoration(
                                    boxShadow: Constant.boxShadow,
                                    color: Colors.white,
                                    borderRadius: const BorderRadius.all(
                                        Radius.circular(10))),
                                child: Row(
                                  children: [
                                    Image.asset(
                                      "assets/announce.png",
                                      scale: 30,
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    Expanded(
                                      child: noticeList.isEmpty
                                          ? Container()
                                          : MarqueeWidget(
                                              itemBuilder:
                                                  (BuildContext context,
                                                      int index) {
                                                return Text(
                                                  "${noticeList[index].msg}",
                                                  style: const TextStyle(
                                                      overflow: TextOverflow
                                                          .ellipsis),
                                                );
                                              },
                                              //循环的提示消息数量
                                              count: noticeList.length,
                                            ),
                                    ),
                                    const SizedBox(
                                      width: 10,
                                    ),
                                    InkWell(
                                        onTap: () {
                                          showDialog(
                                              context: context,
                                              builder: (c) => SimpleDialog(
                                                    title: Text("emmm"),
                                                    children: [
                                                      SizedBox(
                                                          height: 300,
                                                          child: Column(
                                                            children: [],
                                                          ))
                                                    ],
                                                  ));
                                        },
                                        child: const Icon(Icons.menu))
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                ),
                expandedHeight: 300,
                bottom: TabBar(
                  indicatorPadding: const EdgeInsets.symmetric(horizontal: 20),
                  indicatorColor: Colors.white,
                  tabs: List.generate(
                      tabs.length,
                      (index) => Tab(
                            text: tabs[index],
                          )),
                ),
              ),
            ];
          },
          body: const TabBarView(
            children: [
              CollectionList(),
              BlindBoxList(),
              ActivityList(),
            ],
          ),
        ),
      ),
    );
  }
}
